<template>
  <div style="display: flex" v-if="!show">
<!--    <div style="width: 348px;background: red;height: 796px">-->
<!--      <img src="../assets/gpt/1.png">-->
<!--    </div>-->
    <div style="width: 100%;padding: 10px">
      <div style="display: flex;justify-content: space-between;width: 100%;">
        <img style="height: 40px" src="../assets/gpt/7.png"/>
        <img style="height: 40px" src="../assets/gpt/2.png">
      </div>
      <div className="content">
        <h1>有什么可以帮忙的吗？</h1>
        <div className="inpt">
          <el-input placeholder="询问任何问题" @keydown="keydown" style="height: 40px" class="int" v-model="value"/>
          <img style="width: 600px" src="../assets/gpt/3.png">
        </div>
        <div className="info">ChatGPT 也可能会犯错。请核查重要信息。</div>
      </div>
    </div>
  </div>
  <Gpt1 v-if="show" @returnEvent="returnEvent" ref="gpt1Ref"/>
</template>

<script setup lang="js">
import {nextTick, ref} from "vue";
import Gpt1 from "./gpt1.vue";

let show = ref(false)
let gpt1Ref = ref(null)
let value = ref('')
let txt = ''

const keydown = (event) => {
  if (event.keyCode == 13) {
    show.value = true
    nextTick(() => {
      gpt1Ref.value.openInit(value.value)
    })
  }
}
const returnEvent = () => {
  value.value = ''
  show.value = false
}
</script>
<style scoped lang="scss">
.content {
  text-align: center;
  width: 600px;
  //display: flex;
  //justify-content: center;
  margin: 0 auto;
  margin-top: 145px;
  //padding: 0 60px;
}

.inpt {
  box-shadow: 0px 0px 0px 1px #d3d3d3;
  border-radius: 10px;
  height: 90px;
  padding-top: 4px;
}

.int {
  height: 40px;

}

.info {
  //position: fixed;
  //居中
  right: 50%;
  margin-top: 35%;
  bottom: 60px;
  //left: 52%;
  font-size: 12px;
  //transform: translateX(-50%);
}

:deep(.el-input__wrapper) {
  border: 0;
  box-shadow: none;
}
</style>

<style>
body {
  margin: 0;
}
</style>